<template>
  <view class="tags flex flex-items-center flex-justify-around">
    <view
      class="tag flex flex-col flex-items-center flex-justify-center"
      v-for="(item, index) in tags"
      :key="index"
      @click="changeActive(index)"
    >
      <img class="tag-img" :src="activeIndex === index ? item.urlActive : item.url" alt="" />
      <text class="tag-text">{{ item.title }}</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useTabbarStore } from '@/store/tabbar'

const tabbarStore = useTabbarStore()

const activeIndex = computed(() => tabbarStore.tabbarIndex)
// console.log('🚀 ~ file: tabbar.vue:21 ~ activeIndex:', activeIndex)
const tags = ref([
  {
    title: '首页',
    url: new URL('@img/home/tags-1.png', import.meta.url).href,
    urlActive: new URL('@img/home/tags-1-a.png', import.meta.url).href,
    path: '/pages/home/home',
  },
  {
    title: '圈子',
    url: new URL('@img/home/tags-2.png', import.meta.url).href,
    urlActive: new URL('@img/home/tags-2-a.png', import.meta.url).href,
    path: '/pages/circle/circle',
  },
  {
    title: '消息',
    url: new URL('@img/home/tags-3.png', import.meta.url).href,
    urlActive: new URL('@img/home/tags-3-a.png', import.meta.url).href,
    path: '/pages/message/index',
  },
  {
    title: '订单',
    url: new URL('@img/home/tags-4.png', import.meta.url).href,
    urlActive: new URL('@img/home/tags-4-a.png', import.meta.url).href,
    path: '/pages/order/order',
  },
  {
    title: '我的',
    url: new URL('@img/home/tags-5.png', import.meta.url).href,
    urlActive: new URL('@img/home/tags-5-a.png', import.meta.url).href,
    path: '/pages/mine/index',
  },
])
// 点击变化
const changeActive = (index: number) => {
  tabbarStore.setTabbarIndex(index)
  uni.reLaunch({
    url: tags.value[index].path,
  })
}
</script>

<style scoped lang="scss">
.tags {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3.56rem;
  background-color: #fff;
  .tag {
    .tag-img {
      width: 1.75rem;
      height: 1.75rem;
    }
    .tag-text {
      width: 1.5rem;
      height: 1.25rem;
      font-family: PingFangSC-regular;
      font-size: 0.75rem;
      line-height: 1.06rem;
      color: rgba(16, 16, 16, 1);
      text-align: left;
    }
  }
}
</style>
